// 
// computerMap.js
// 海石后台管理
// 
// 2024/12/09.
// 

import * as api from "./api.js"
import computerPNG from "@/assets/computer.png"

export const computerMap = async (map) => {
    const point = new BMapGL.Point(116.404, 38.2);  // 创建点坐标
    map.centerAndZoom(point, 1);
    map.enableScrollWheelZoom(true)
    map.addControl(new BMapGL.ZoomControl());
    const {data} = await loadComputerMap()
    renderComputerOnMap(map, data)
}
/**
 * 加载所有主机
 * @returns {Promise|Promise<*>|*}
 */
const loadComputerMap = () => {
    return api.GetComputerList();
}
/**
 * 渲染主机到地图上
 * @param map
 * @param list
 */
const renderComputerOnMap = (map, list) => {
    const computerLayer = new BMapGL.CustomHtmlLayer(createComputerDom, {
        offsetX: -10,
        offsetY: -15,
        // minZoom: 13,
        // maxZoom: 19,
        enableDraggingMap: true
    })
    const customerMarkerData = formatCustomerMarkerData(list)
    computerLayer.setData(customerMarkerData)
    map.addCustomHtmlLayer(computerLayer)
    computerLayer.addEventListener('click', function (e) {
        console.log(e.target.properties.data)
    });
}

/**
 * 创建主机 DOM
 * @param config
 * @returns {HTMLDivElement}
 */
const createComputerDom = (config) => {
    const computer = document.createElement("div");
    computer.style.width = `${config.width}px`;
    computer.style.height = `${config.height}px`;
    computer.style.background = `url(${computerPNG}) no-repeat`;
    computer.style.backgroundSize = `100% 100%`;
    computer.className = "map-computer-marker";
    computer.style.position = "relative";

    // 详情
    const detail = document.createElement("div");
    detail.style.position = "absolute";
    detail.style.left = 0;
    detail.style.top = "-50px";
    detail.style.zIndex = 100;
    detail.style.background = "#fff";
    detail.style.color = "#106ebe";
    detail.style.border = "1px solid #106ebe";
    detail.style.padding = "4px 10px";
    detail.style.fontSize = "14px";
    detail.style.boxShadow = "0 0 10px 0 rgba(0,0,0,0.2)";
    detail.style.whiteSpace = "nowrap";
    detail.innerHTML = `<div style="display: inline-block;width: 70px;color: #333">客户名称：</div>${config.data.name}<br/><div style="display: inline-block;width: 70px;color: #333">所在区域：</div>${config.data.region}`;
    // detail.style.transition = "transform 0.2s ease";
    detail.style.transform = "scale(0)";

    computer.addEventListener("mouseenter", () => {
        // detail.style.display = "block";
        detail.style.transform = "scale(1)";
    })
    computer.addEventListener("mouseleave", () => {
        // detail.style.display = "none";
        detail.style.transform = "scale(0)";
    })

    computer.appendChild(detail);

    return computer
}

/**
 * 格式化客户标记数据
 * @param list
 * @returns {{}}
 */
const formatCustomerMarkerData = (list) => {
    const data = {
        type: 'FeatureCollection',
        features: list.map(item => {
            return {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: item.location ? item.location.split(",") : []
                },
                properties: {
                    width: 20,
                    height: 20,
                    data: item
                }
            }
        })
    }
    return data
}